<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购买详情</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel='stylesheet' href='css/hizoom.css'>
    <link rel="stylesheet" href="css/details.css">
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js//my.effect.js"></script>
</head>
<body>
<!-- header start 部分-->
<header>
    <nav class="navbar navbar-default mynav">
        <div class="container navlist">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li ><a href="index.html">首页</a></li>
                    <li><a href="gallary.html">商城</a></li>
                    <li><a href="design.html">设计研发</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">品牌故事<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="about.html">公司简介</a></li>
                            <li><a href="about.html">关于我们</a></li>
                            <li><a href="design.html">科技研发</a></li>
                        </ul>
                    </li>
                    <li ><a href="news.html">新闻资讯</a></li>
                    <li><a href="#">合作品牌</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right nav-lists">
                    <li><button type="button" class="btn  navbar-btn btn_login" data-toggle="modal" data-target="#login_modal">登录</button></li>
                    <li><button type="button" class="btn  navbar-btn btn_register" data-toggle="modal" data-target="#register_modal">注册</button></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">我的<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="myCart.html">我的订单</a></li>
                            <li><a href="#">我的收藏</a></li>
                            <li><a href="#">收货地址</a></li>
                        </ul>
                    </li>
                    <li><a href="myCart.html">我的订单</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >手机版<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">电脑版</a></li>
                            <li><a href="#">平板</a></li>
                        </ul>
                    </li>
                    <li><a href="#">购物车(0)</a></li>
                    <li><a href="#"><img src="images/details/cat.png" alt=""></a></li>
                </ul>
            </div>
            <!--  登录 modal start-->
            <div class="modal fade" id="login_modal" class="bs-example-modal-sm" role="dialog" aria-labelledby="gridSystemModalLabel">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="gridSystemModalLabel">登录账号</h4>
                        </div>
                        <div class="modal-body">
                            <div class="container-fluid">
                                <h4><a href="login_register/login.html">已有账号?立即去登录</a></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!--  登录 modal end-->
            <!--  注册 modal start-->
            <div class="modal fade" id="register_modal" class=" bs-example-modal-sm" role="dialog" aria-labelledby="gridSystemModalLabel">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="gridModalLabel">注册账号</h4>
                        </div>
                        <div class="modal-body">
                            <div class="container-fluid">
                                <h4><a href="login_register/register.html">无账号?立即去注册</a></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- 注册 modal end-->
        </div>
    </nav>
    <nav class="navbar navbar-default ">
        <div class="container con">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img alt="brand" src="images/index/logo1.png">
                </a>
            </div>
            <ul class="nav navbar-nav myul">
                <li><a href="#">全部商品分类</a></li>
                <li><a href="#">新品区</a></li>
                <li><a href="#">热销区</a></li>
                <li><a href="#">手机</a></li>
                <li><a href="#">电脑</a></li>
            </ul>
            <form class="navbar-form navbar-right " role="search">
                <div class="form-group">
                    <label for="">
                        <input type="text" class="form-control" placeholder="搜索商品关键词" style="float: left;">
                        <span class="input-group-btn"><button class="btn btn-default" type="button">
                        <span class="glyphicon glyphicon-search" aria-hidden="true">
                        </span></button></span>
                    </label>
                </div>
            </form>
        </div>
    </nav>
</header>
<hr/>
<!-- header end 部分-->

<!-- 中间content start 部分-->
<div class="buy">
    <div class="container">
        <div class="row">
            <div class="col-md-5 col-xs-5 hizoom hi1">
                <img src="images/details/details_07.jpg" class="img-responsive" >
            </div>
            <div class="col-md-6 sinfos col-xs-6">
                <h2>荣耀畅玩平板2 8英寸 LTE高配版</h2>
                <p>轻薄金属机身，8英寸高清屏，大电池长续航，高性价比之选！</p>
                <div class="row info price">
                     <div class="col-md-12 col-xs-12">
                         <div class="col-md-4 col-xs-4 prip">
                             <p>价  格</p>
                         </div>
                         <div class="col-md-8 col-xs-8 pri">
                             <h1>¥1099.00</h1>
                         </div>
                     </div>
                    <div class="col-md-12 col-xs-12">
                        <div class="row  info-list">
                            <div class="col-md-2 col-xs-2">
                                <button>日晖金</button>
                            </div>
                            <div class="col-md-6 col-xs-6">
                                <p>购买即赠商城积分，积分可抵现~</p>
                            </div>
                        </div>
                    </div>
                </div>
                <p>服务说明     已满48元    已免运费    由商城负责发货，并提供售后服务</p>
                <P>商品编码    1201010004403</P>
                <div class="row">
                    <div class="col-md-7 col-xs-7">
                        <div class="row info-list">
                            <div class="col-md-4 col-xs-4">
                                <p>选择颜色</p>
                            </div>
                            <div class="col-md-4 col-xs-4">
                                <button>日晖金</button>
                            </div>
                            <div class="col-md-4 col-xs-4">
                                <button>日晖金</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7 col-xs-7">
                        <div class="row info-list">
                            <div class="col-md-4 col-xs-4">
                                <p>选择版本 </p>
                            </div>
                            <div class="col-md-4 col-xs-4">
                                <button> LTE版</button>
                            </div>
                            <div class="col-md-4 col-xs-4">
                                <button> LTE版</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7 col-xs-7">
                        <div class="row info-list">
                            <div class="col-md-4 col-xs-4">
                                <p>选择容量 </p>
                            </div>
                            <div class="col-md-4 col-xs-4">
                                <button>3GB+32GB</button>
                            </div>
                            <div class="col-md-4 col-xs-4">
                                <button> 4GB+64GB</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7 col-xs-7">
                        <div class="row info-list">
                            <div class="col-md-4 col-xs-4">
                                <p>选择套餐</p>
                            </div>
                            <div class="col-md-4">
                                <button>官方标配</button>
                            </div>
                            <div class="col-md-4">
                                <button>套餐一</button>
                            </div>
                        </div>
                     </div>
                    <div class="col-md-7 col-xs-7">
                        <div class="row info-list">
                            <div class="col-md-4 col-xs-4">
                                <p>保障服务</p>
                            </div>
                            <div class="col-md-4 col-xs-4">
                                <button>碎屏服务宝1年￥109</button>
                            </div>
                            <div class="col-md-4 col-xs-4">
                                <button>延长服务宝1年 ￥118</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7 col-xs-7">
                        <div class="row info-list">
                            <div class="col-md-4 col-xs-4">
                                <p>推荐</p>
                            </div>
                            <div class="col-md-4 col-xs-4">
                                <button>平板5 8英寸</button>
                            </div>
                            <div class="col-md-4 col-xs-4">
                                <button>畅玩平板29.6英寸</button>
                            </div>
                        </div>
                    </div>
                </div>
                <p style="color: darkred">已选择商品:日晖金 / LTE版 / 3GB+32GB / 官方标配</p>
                <div class="row ">
                    <div class="col-md-6 btn_cat col-xs-4">
                        <button><a href="#">加入购物列车</a></button>
                    </div>
                    <div class="col-md-6 col-xs-4 btn_buy">
                        <button><a href="#" class="text-center">立即支付</a></button>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
        <script>window.jQuery || document.write('<script src="js/jquery-3.4.1.min.js"><\/script>')</script>
        <script src='js/hizoom.js'></script>
        <script>
            $('.hi1').hiZoom({
                width: 400,
                height:350,
                position: 'right'
            });
            $('.hi2').hiZoom({
                width: 400,
                position: 'left'
            });
        </script>

        <!--商品详情start-->
        <div class="pingjia">
            <div class="row">
                <div class="col-md-3 col-xs-3">
                    <p style="color: darkred">商品详情</p>
                    <hr style="border: none; width: 100px;height: 1px;color: darkred">
                </div>
                <div class="col-md-3 col-xs-3">
                    <p>规格参数</p>
                </div>
                <div class="col-md-3 col-xs-3">
                    <p>包装售后</p>
                </div>
                <div class="col-md-3 col-xs-3">
                    <p>用户评价(+999)</p>
                </div>
            </div>
            <hr>
        </div>
        <section>
            <div class="row">
                <div class="panel panel-primary" >
                    <div class="panel-heading text-center">
                       商品规格说明
                    </div>
                    <div class="panel-body " style="margin: 0; padding: 0;">
                        <table class="table table-striped table-bordered table-hover" >
                            <tr>
                                <th>
                                <td>摄像头</td>
                                <td>1200万像素,三摄像头</td>
                                <td>1200万像素,三摄像头</td>
                                <td>1200万像素,三摄像头</td>
                                <td>1200万像素,三摄像头</td>
                                <td>1200万像素,三摄像头</td>
                                <td>1200万像素,三摄像头</td>
                                </th>
                            </tr>
                            <tr>
                                <th>
                                <td>显示屏</td>
                                <td>5.8英寸</td>
                                <td>5.5英寸</td>
                                <td>4.7英寸</td>
                                <td>6.1英寸</td>
                                <td>5.8英寸</td>
                                <td>6.5英寸</td>
                                </th>
                            </tr>
                            <tr >
                                <th>
                                <td>电池</td>
                                <td>可达11小时</td>
                                <td>可达11小时</td>
                                <td>可达11小时</td>
                                <td>可达11小时</td>
                                <td>可达11小时</td>
                                <td>可达11小时</td>
                                </th>
                            </tr>
                            <tr >
                                <th>
                                <td>颜色</td>
                                <td>黄色</td>
                                <td>红色</td>
                                <td>紫色</td>
                                <td>黑色</td>
                                <td>银灰</td>
                                <td>白色</td>
                                </th>
                            </tr>
                            <th>
                            <td>显示屏</td>
                            <td>5.8英寸</td>
                            <td>5.5英寸</td>
                            <td>4.7英寸</td>
                            <td>6.1英寸</td>
                            <td>5.8英寸</td>
                            <td>6.5英寸</td>
                            </th>
                            </tr>
                            <tr >
                                <th>
                                <td>电池</td>
                                <td>可达11小时</td>
                                <td>可达11小时</td>
                                <td>可达11小时</td>
                                <td>可达11小时</td>
                                <td>可达11小时</td>
                                <td>可达11小时</td>
                                </th>
                            </tr>
                            <tr >
                                <th>
                                <td>价格</td>
                                <td>$.4999</td>
                                <td>$.4999</td>
                                <td>$.4999</td>
                                <td>$.4999</td>
                                <td>$.4999</td>
                                <td>$.4999</td>
                                </th>
                            </tr>
                            <tr >
                                <th>
                                <td>电池</td>
                                <td>可达11小时</td>
                                <td>可达11小时</td>
                                <td>可达11小时</td>
                                <td>可达11小时</td>
                                <td>可达11小时</td>
                                <td>可达11小时</td>
                                </th>
                            </tr>
                            <tr >
                                <th>
                                <td>价格</td>
                                <td>$.4999</td>
                                <td>$.4999</td>
                                <td>$.4999</td>
                                <td>$.4999</td>
                                <td>$.4999</td>
                                <td>$.4999</td>
                                </th>
                            </tr>
                        </table>
                    </div>
                    <div class="panel-footer">
                        *参数仅供参考
                    </div>
                </div>
                <div class="col-md-12 col-xs-12">
                    <img src="images/details/details_19.jpg" class="img-responsive" alt="">
                </div>
                <div class="col-md-12 col-xs-12">
                    <img src="images/details/details_22.jpg" class="img-responsive" alt="">
                </div>
                <div class="col-md-12 col-xs-12">
                    <img src="images/details/details_24.jpg" class="img-responsive" alt="">
                </div>
                <div class="col-md-12 col-xs-12">
                    <img src="images/details/details_25.jpg" class="img-responsive" alt="">
                </div>
                <div class="col-md-12 col-xs-12">
                    <img src="images/details/details_29.jpg" class="img-responsive" alt="">
                </div>
                <div class="col-md-12 col-xs-12">
                    <img src="images/details/details_31.jpg" class="img-responsive" alt="">
                </div>
                <div class="col-md-12 col-xs-12">
                    <img src="images/details/details_34.jpg" class="img-responsive" alt="">
                </div>
            </div>
        </section>
        <!--商品详情 end-->
    </div>
</div>
<!-- 中间content end 部分-->

<!-- footer 部分 start -->
<footer>
    <div class="nav-list myfooter">
        <div class="container">
            <div class="row">
                <div class="col-md-2">
                    <h4>关于公司</h4>
                    <ul>
                        <li><a href="#">企业简介</a></li>
                        <li><a href="#">品牌简介</a></li>
                        <li><a href="#">品牌荣盛</a></li>
                        <li><a href="#">品牌文化</a></li>
                    </ul>
                </div>
                <div class="col-md-2 ">
                    <h4>订单服务</h4>
                    <ul>
                        <li><a href="#">购买指南</a></li>
                        <li><a href="#">支付方式</a></li>
                        <li><a href="#">合作物流</a></li>
                        <li><a href="#">发货时间</a></li>
                    </ul>
                </div>
                <div class="col-md-2 ">
                    <h4>服务支持</h4>
                    <ul>
                        <li><a href="#">售后服务</a></li>
                        <li><a href="#">申请退换</a></li>
                        <li><a href="#">上门服务</a></li>
                        <li><a href="#">授权商家</a></li>
                    </ul>
                </div>
                <div class="col-md-2 ">
                    <h4>关于我们</h4>
                    <ul>
                        <li><a href="#">人才理念</a></li>
                        <li><a href="#">经营理念</a></li>
                        <li><a href="#">联系方式</a></li>
                        <li><a href="#">集团战略</a></li>
                    </ul>
                </div>
                <div class="col-md-2 ">
                    <h4>新闻中心</h4>
                    <ul>
                        <li><a href="#">研发中心</a></li>
                        <li><a href="#">行业新闻</a></li>
                        <li><a href="#">最新资讯</a></li>
                        <li><a href="#">国际时报</a></li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <div class="abtn workdate">
                        <a href="#" class="text-center">联系客服</a>
                    </div>
                    <h3>400 997-3454</h3>
                    <p >周一至周日9:00-18:00(节假日除外)</p>
                </div>
            </div>
        </div>
    </div>
    <div class="copryright">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-xs-4 col-md-offset-2 ">
                    <span class="copry">Copryright 2020 软件2班李映霞 1830226 all right Reserved 李软件工作室 </span>
                    <a href="#">| 法律声明 | 隐私条款</a>
                    <p class="copry">粤备xxxxxxx号  公安备xxxxxx号</p>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- footer 部分 end -->
</body>
</html>